<template>
  <div class="Vip">
    <!-- <van-nav-bar
      title="会员申请"
      left-arrow
      @click-left="goBack"
    />-->
    <nav-bar :title="'会员申请'"></nav-bar>
    <div class="vipType wrap">
      <!-- <div class="typeTitle" v-show="userInfo.userType === 0">企业会员</div>
      <div class="typeTitle" v-show="userInfo.userType === 1">个人会员</div>-->
      <div class="typeSelect">
        <van-form label-align="right">
          <van-field
            readonly
            clickable
            name="picker"
            :value="vipType.typeName"
            :label="userInfo.userType === 0?'企业会员':'个人会员'"
            placeholder="点击选择性别"
            @click="showPic = true"
          />
          <van-popup v-model="showPic" position="bottom">
            <van-picker
              show-toolbar
              :columns="vipList"
              @confirm="onConf"
              @cancel="showPic = false"
            />
          </van-popup>
        </van-form>

        <!-- <van-radio-group v-model="vipType">
          <van-radio :name="item" shape="square" v-for="(item , index) in vipList" :key="index">{{item.typeName+'     '+item.price+'/年'}}</van-radio>
        </van-radio-group>-->
      </div>
    </div>
    <div class="table-content">
      <component :vipTypeId="vipType.vipTypeId" :tableName="vipType.typeName" :is="vipType.pageUrl"></component>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import gerenhuiyuan from './vipTable/gerenhuiyuan'
import gerenhuiyuanweiyuan from './vipTable/gerenhuiyuanweiyuan'
import kejiweihuiyuan from './vipTable/kejiweihuiyuan'
import navBar from '@/components/NavBar'
export default {
  name: 'VipApply',
  components: {
    gerenhuiyuan,
    gerenhuiyuanweiyuan,
    kejiweihuiyuan,
    navBar,
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      showPic: false,
      vipType: {},
      vipList: [],
      params: {
        vipType: 0,
        page: 1,
        pageSize: 20,
      },
    }
  },
  methods: {
    onConf(val) {
      console.log(val)
      this.showPic = false
      this.vipType = val
    },
    goBack() {
      this.$router.back()
    },
    findvipList() {
      this.$request({
        url: '/vip/selectVipList',
        method: 'post',
        data: this.params,
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.vipList = rsp.data.list
          console.log(this.vipList)
          this.vipList.forEach((item) => {
            item.text = item.typeName + '  ' + item.price + '/年'
          })

          this.vipType = this.vipList[0]
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
  mounted() {
    this.params.vipType = this.userInfo.userType
    this.findvipList()
  },
}
</script>

<style lang='scss' spaced>
@import '../assets/css/base';
.Vip {
  .vipType {
    display: flex;
    justify-content: space-evenly;
    margin-top: px2rem(40);
    .typeTitle {
      font-size: px2rem(40);
      line-height: px2rem(74);
    }
    .typeSelect {
      font-size: px2rem(38);
      width: 100%;
      .van-radio {
        margin: px2rem(20) 0;
      }
    }
  }
}
</style>
